<template>
<div class="nav-menu" :class="$store.state.pifu==true?'nav-menu1':''" :style="'height: ' + ($store.state.windowSize.width / 19.2 ) + 'px;line-height: ' + ($store.state.windowSize.width / 19.2 * 0.33) +'px'">
    <div class="head-bg">
        <div class="region-date">{{currentDate}} {{currentWeek}}</div>
         <!-- <img @click="skinPeeler" class="huanfu" :src="$store.state.pifu==true?require('@/assets/images/pifu1.png'):require('@/assets/images/pifu2.png')" /> -->
    </div>
    <div class="banner">
        <p :class="chav==1?'active':''" @click="changePage(1)">首页</p>
        <p :class="chav==2?'active':''" @click="changePage(2)">客运</p>
        <p :class="chav==3?'active':''" @click="changePage(3)">货运</p>
    </div>
    <div class="banner banner1">
        <p :class="chav==4?'active':''" @click="changePage(4)">维修</p>
        <p :class="chav==5?'active':''" @click="changePage(5)">治超</p>
        <p :class="chav==6?'active':''" @click="changePage(6)">驾培</p>
    </div>
</div>
</template>
<script>
import types from '@/store/constants/types'
export default {
    name: 'NavMenu',
    data(){
        return{ 
            currentDate:"",
            currentWeek:"",
            chav:1
        }
    },
    created(){
        let year = new Date().getFullYear();
        let month = new Date().getMonth()+1;
        let day = new Date().getDate();
        let week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][new Date().getDay()]
        this.currentDate = `${year}年${month}月${day}日`
        this.currentWeek = week
    },
    methods:{
        changePage(page){
            this.chav=page
             this.$store.commit(types.SET_HOME_PAGE, page)
        },
        skinPeeler(){
             this.$store.commit(types.SET_SKIN_CLASS)
        }
    }
    }
</script>

<style lang="scss" scoped>
@import '@/style/views/nav-menu.1.scss';
.region-date{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 60px;
    font-size: 16px;
    color: #fff;
}
.huanfu{
     position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 35px;
   width:20px;
   height:20px;
   z-index:1;
}
.banner{
    display:flex;
    width:100%;
     position: absolute;
    top: 50%;
    left:14%;
    transform: translateY(-50%);
     font-size: 18px;
    color: #fff;
    p{
        padding:0 2%;
        cursor: pointer;
        color: rgb(32, 184, 204);
        // text-shadow: 2px 2px 5px  rgba(108, 235, 252, 0.99);
         background-image: url('../assets/images/menu_bg.png');
         background-size:100% 100%;
         box-sizing: border-box;
    }
    p.active{
         color: rgba(108, 235, 252, 0.99);
    }
}
.banner1{
    left:67.5%; 
}
@media screen and (max-width: 1639px){
    .region-date{
        font-size:14px;
    }
   .banner{
       left:16%;
         p{
              padding:0 1.5%;
         }
    }
        .banner1{
    left:67.5%; 
}
}
@media screen and (min-width: 1880px){
    .banner{
        left:14.8%;
    }
    .banner1{
    left:67.5%; 
}
}
@media screen and (max-width: 1290px){
    .region-date{
        font-size:12px;
    }
   .banner{
       left:17%;
       font-size: 14px;
         p{
              padding:0 1%;
         }
    }
        .banner1{
    left:67.5%; 
}
}
.nav-menu.nav-menu1{
   .region-date{
       color:#000;
   } 
   .banner{
    color: #000;
    p{
        color: #999;
        // text-shadow: 2px 2px 5px  rgba(108, 235, 252, 0.99);
         background-image: url('../assets/images/menu_bg1.png');
         background-size:100% 100%;
         box-sizing: border-box;
    }
    p.active{
         color: rgba(0,0, 0, 0.88);
    }
}
}
</style>